<script setup>
import { onMounted } from 'vue'

const props = defineProps({
  w: {
    type: Number,
    default: 600,
  }, // 宽度
  h: {
    type: Number,
    default: 600,
  },
})
function nextPage() {
  $('#book').turn('next')
}
function prevPage() {
  $('#book').turn('previous')
}

onMounted(() => {
  nextTick(() => {
    $('#book').turn({
      width: props.w,
      height: props.h,
      // Elevation
      elevation: 50,
      // Enable gradients
      gradients: true,
      // Auto center this flipbook
      autoCenter: false,
      // display: 'single', // 显示：single=单页，double=双页，默认双页
      when: {
      // 监听事件
        async turning(e, page, view) {
          console.log(e, page, view)
        // 翻页前触发
        },
        turned(e, page) {
          console.log('翻页后', page, e)
        // 翻页后触发
        },
        released(a, b) {
          console.log('released', a, b)
        },
      },
    })
  })
})
</script>

<template>
  <div id="book" class="book">
    <!-- 每个 div 表示一页 -->
    <slot />
  </div>
</template>
